<template>
  <el-dialog :visible.sync="visible" :title="type === 'add' ? '新增':'编辑'" :close-on-click-modal="false" v-loading="loading">
    <el-form ref="form" label-width="100px" :model="bankInfo" :rules="rules">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="客户名称">
            {{ bankInfo.customerName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="银行卡号"
            prop="bankCardno"
          >
            <el-input
              maxlength="19"
              v-model="bankInfo.bankCardno"
              placeholder="请输入银行卡号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="银行名称"
            prop="bankName"
          >
            <el-input
              v-model="bankInfo.bankName"
              maxlength="100"
              placeholder="请输入银行名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="开户行名称"
            prop="bankOpenname"
          >
            <el-input
              v-model="bankInfo.bankOpenname"
              maxlength="100"
              placeholder="请输入开户行名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="银行开户名"
            prop="bankCutname"
          >
            <el-input
              v-model="bankInfo.bankCutname"
              maxlength="100"
              placeholder="请输入银行开户名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="账户类型"
            prop="accountType"
          >
            <el-radio-group v-model="bankInfo.accountType">
              <el-radio label="1">企业基本户</el-radio>
              <el-radio label="2">企业一般户</el-radio>
              <el-radio label="3" v-if="agentType === '1'">共管账户</el-radio>
              <el-radio label="4">个人账户</el-radio>
              <el-radio label="5">其他</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button size="small" type="primary" @click="handleSubmit">确认</el-button>
      <el-button size="small" @click="visible=false">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { validateNumber } from '@/utils/validate'
import {addCustomerBank, editCustomerBank, agentDetail} from "@/api/processManage/approveForms";

export default {
  data() {
    return {
      bankInfo: {},
      visible: false,
      type: "add",
      rules: {
        bankCardno: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' },
          {
            required: true,
            validator: validateNumber,
            trigger: 'blur'
          }
        ],
        bankName: [
          { required: true, message: '请输入银行名称', trigger: 'blur' }
        ],
        bankOpenname: [
          { required: true, message: '请输入开户行名称', trigger: 'blur' }
        ],
        bankCutname: [
          { required: true, message: '请输入银行开户名', trigger: 'blur' }
        ],
        accountType: [
          { required: true, message: '请选择账户类型', trigger: 'change' }
        ]
      },
      loading: false,
      agentType: '1'
    }
  },
  methods: {
    open(customerBankInfo, type) {
      this.visible = true;
      this.bankInfo = {
        ...customerBankInfo
      }
      this.type = type
      agentDetail().then(res => {
        this.agentType = res.data.agentType
      })
      this.$refs.form.resetFields()
    },
    handleSubmit() {
      const method = this.type === "add" ? addCustomerBank : editCustomerBank;
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          method(this.bankInfo).then(res => {
            if (res.code === 200) {
              this.visible = false
              this.$emit("ok", this.bankInfo.customerId)
            } else {
              this.$message.error(res.msg)
            }
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
